<template>
  <div class="scanning-box">
    <div class="flex-header">
        <my-header title="唛头验证" />
    </div>
    <div class="content-box">
        <mu-text-field v-model="carVin" placeholder="车辆VIN" ref="carvin" class='input' @keyup.enter.native="getCarVin()"><i class="iconfont icon-saomiao" @click="scan('car')"></i></mu-text-field>
        <mu-text-field v-model="markVin" placeholder="唛头VIN" ref="markvin" class='input' @keyup.enter.native="getMarkVin()"><i class="iconfont icon-saomiao" @click="scan('mark')"></i></mu-text-field>
        <mu-card class="my-cards">
            <mu-card-text>
                <dl class="card-info" v-if="isInfo">
                    <dd>VIN：{{vin}}</dd>
                    <dd>车型：{{car}}</dd>
                    <dd>配置：{{config}}</dd>
                    <dd>颜色：{{color}}</dd>
                    <dd>出口合同号：{{shipNum}}</dd>
                    <dd>出库时间：{{outTime}}</dd>
                </dl>
                <div class="card-tips" :class="[msgColor == 'red' ? 'color-red' : 'color-green']" v-if="isMsg">
                    <div v-html="msgVin" class="vin"></div>
                    <div class="msgTxt">{{msgTxt}}</div>
                </div>
            </mu-card-text>
        </mu-card>
    </div>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
import myHeader from "@/components/header"
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  components: {
    myHeader, scanning
  },
  data () {
    return {
        isInfo: false,
        isMsg: true,
        isScanning: false,
        scanMark: "",
        carVin: "",
        markVin: "",
        bolId: null,
        isAction: true,
        vin: "",
        car: "",
        color: "",
        config: "",
        outTime: "",
        shipNum: "",
        msgColor: 'red',
        msgVin: "",
        msgTxt: ""
    }
  },
  methods: {
    scan (txt) {
        this.scanMark = txt;
        this.isScanning = true;
    },
    closeing (val) {
        val ? this.isScanning = false : null;
    },
    childByValue (val) {
        if(val){
            if(val.split('&')[1] == 'car'){
                this.carVin = val.split('&')[0];
                this.getCarVin();
            }else if(val.split('&')[1] == 'mark'){
                this.markVin = val.split('&')[0];
                this.getMarkVin();
            }
        }
    },
    getMarkVin () {
        if(this.carVin == ""){
            this.Toast({
                message: "请先扫描车辆VIN"
            });
            return false;
        }
        if(this.isAction){
            this.isAction = false;
            let data = Object.assign({}, this.$store.state.user, {
                content: {
                    carVin: this.carVin,
                    markVin: this.markVin,
                    bolId: this.bolId,
                    flag: 'markVin'
                }
            });
            console.log('11111111111111');
            this.common.reqData(api.app('cheakShipMark'), data, res=>{
                console.log(res.data);
                if(res.data.status == 100){
                    this.msgColor = res.data.content.msgColor;
                    this.msgVin = res.data.content.msgVin;
                    this.msgTxt = res.data.content.msgTxt;
                    if(this.msgColor && this.msgVin && this.msgTxt){
                        this.isInfo = false;
                        if(this.msgVin.indexOf('唛头') >= 0){
                            this.markVin = "";
                        }
                        if(this.msgColor == 'green'){
                            this.markVin = this.carVin = "";
                            this.$refs.carvin.$el.children[0].getElementsByTagName('input')[0].focus();
                        }
                    }else{
                        this.isInfo = true;
                    }
                }else{
                    // 提示
                    this.Toast({
                        message: res.data.msg
                    });
                }
                this.isAction = true;
            },err =>{
                this.isAction = true;
            });
        }
    },
    getCarVin () {
        if(this.isAction){
            this.isAction = false;
            let data = Object.assign({}, this.$store.state.user, {
                content: {
                    carVin: this.carVin,
                    markVin: this.markVin,
                    flag: 'carVin'
                }
            });
            this.msgColor = this.msgVin = this.msgTxt = "";
            this.common.reqData(api.app('getBol'), data, res=>{
                console.log(res.data);
                if(res.data.status == 100){
                    this.car = res.data.content.car;
                    this.color = res.data.content.color;
                    this.bolId = res.data.content.bolId;
                    this.config = res.data.content.config;
                    this.outTime = res.data.content.outTime;
                    this.vin = res.data.content.vin;
                    this.shipNum = res.data.content.shipNum;
                    this.msgColor = res.data.content.msgColor;
                    this.msgVin = res.data.content.msgVin;
                    this.msgTxt = res.data.content.msgTxt;
                    if(this.msgColor && this.msgVin && this.msgTxt){
                        this.isInfo = false;
                        if(this.msgColor == 'red'){
                            this.carVin = "";
                        }
                    }else{
                        this.isInfo = true;
                        this.$refs.markvin.$el.children[0].getElementsByTagName('input')[0].focus();
                    }
                }else{
                    // 提示
                    this.Toast({
                        message: res.data.msg
                    });
                }
                this.isAction = true;
            },err =>{
                this.isAction = true;
            });
        }
    }
  },
  mounted () {
  },
  computed: {
  },
  watch:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.scanning-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.mu-input{
    width: 85%;
    margin: 20px auto 0;
    display: block;
}
.imgs{
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin: 10px;
}
.imgs img{
    width: 100%;
}
.photos{
    border: 1px solid #ccc;
    width: 90%;
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
i.iconfont.icon-icon25201{
    display: block;
    font-size: 50px;
    margin: 10px;
}
.paper{
    width: 90%;
    margin: 20px auto 0;
    padding: 10px 0;
}
.paper div{
    padding: 10px 20px;
}
.submit{
    display: block;
    margin: 20px auto;
}
.abnormal-box {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}
.abnormal-box .mu-input{
    width: 45%;
}
em{padding: 0 2em;}
.mu-carousel{
    height: 100%;
}
#ylbox{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#ylbox img{
    width: 100%;
    height: 100%;
}
header.mu-appbar{
    box-shadow: none;
    background: none;
    position: absolute;
    width: 100%;
}
.fl{
    display: flex;
}
dl.card-info dd{
    font-size: 1rem;
    padding: 0.5rem 0;
}
div.card-tips{
    font-size: 1.5rem;
    text-align: center;
}
div.card-tips.color-red{
    color: red;
}
div.card-tips.color-green{
    color: green;
}
div.vin{
    font-size: 1.2rem;
    word-break: break-all;
}
div.msgTxt{
    font-size: 2rem;
    word-break: break-all;
}
</style>
